<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
    <head>
        <link th:href="@{/static/css/main.css}" rel="stylesheet"/>
        <link th:href="@{/webjars/bootstrap-table/dist/bootstrap-table.min.css}" rel="stylesheet"/>
    </head>
    <body>

        <div class="toolbar">
            <div class="radio">
                <label>
                    <input type="radio" checked name="theadClasses">
                        <code>undefined</code>
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="theadClasses">
                        <code>thead-light</code>
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="theadClasses">
                        <code>thead-dark</code>
                </label>
            </div>
        </div>
        <table
            id="table"
            data-url="/static/json/data1.json">

        </table>
        <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
        <script th:src="@{/webjars/popper.js/dist/umd/popper.min.js}"></script>
        <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
        <script th:src="@{/webjars/bootstrap-table/dist/bootstrap-table.min.js}"></script>

        <script>
            var $table = $('#table')
            $table.bootstrapTable({
            columns: [{
            title: 'ID',
            field: 'id'
            }, {
            title: 'Item Name',
            field: 'name'
            }, {
            title: 'Item Price',
            field: 'price'
            }]
            })

            $('.toolbar input').change(function () {
            var classes = $('.toolbar input:checked').next().text()

            $table.bootstrapTable('refreshOptions', {
            theadClasses: classes
            })
            })
        </script>
    </body>
</html>